<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button  class="btn">按钮</button>
    <ul>
        <li class="myli">1</li>
        <li class="myli">2</li>
        <li class="myli">3</li>
        <li class="myli">4</li>
    </ul>
    <script>
        // dom : document object model ：文档对象模型；
        // 1.获取dom 元素（element） 2.操作dom元素；
        // 获取元素
        // 一、通过id名来获取元素 只能获取一个元素；
        // var btnEle = document.getElementById("btn");
        // // 操作该元素
        // btnEle.onclick = function(){
        //     console.log(1111);
        // }

        // 获取元素的多种方式 ；
        // 二、通过类名来获取元素；获取到的是一个伪数组
        // var btnEle = document.getElementsByClassName("btn")[0];
        // console.log(btnEle);
        // var lis = document.getElementsByClassName("myli");
        // // console.log(lis);
        // // lis[0].onclick = function(){
        // //     alert(111);
        // // }

        // for(var i=0;i<lis.length;i++){
        //     lis[i].onclick = function(){
        //         alert(111);
        //     }
        // }
        // 三、通过标签名来获取元素；getElementsByTagName
        // var lis = document.getElementsByTagName("li");
        // console.log(lis);



        // 四、通过 css选择器来获取；只能获取一个元素，如果有多个元素，也只能获取第一个元素；
        // var btnEle = document.querySelector("ul .myli");
        // console.log(btnEle);
        
        // 五。可以通过css选择器获取多个元素；
        var btnEle = document.querySelectorAll(".btn");
        console.log(btnEle);


        // 1.获取一个元素的方法 2. 获取多个元素的方法 （放在伪数组里）;
    </script>
</body>
</html>